<!DOCTYPE html>
<html>
<head>
  <!-- Standard Meta -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properties -->
  <title>Http 测试工具</title>

  <link rel="stylesheet" type="text/css" href="./static/lib/semantic/semantic.css">

  <script src="./static/lib/semantic/assets/jquery-2.1.3.js"></script>
  <script src="./static/lib/semantic/assets/jquery.zclip.min.js"></script>
  <script src="./static/lib/semantic/semantic.js"></script>
  <script>
  $(document).ready(function() {
      // fix main menu to page on passing
      $('.main.menu').visibility({
        type: 'fixed'
      });
	  
      // show dropdown on hover
      $('.main.menu  .ui.dropdown').dropdown({
        on: 'hover'
      });
	  
	  var param_template = document.querySelector("#http-param-template");  //定义参数模板
	  //添加参数
	  $(".http-add-param").on("click",function(){
	      param_template.content.querySelector(".form-param").setAttribute("name","param");
		  param_template.content.querySelector(".form-value").setAttribute("name","value");
	      param_template.content.querySelector(".form-param").value = "";
	      param_template.content.querySelector(".form-value").value = "";
		  $(".param-panel").append(param_template.content.cloneNode(true));
	  });
	  
	  //添加header参数
	  $(".http-add-header").on("click",function(){
	       param_template.content.querySelector(".form-param").setAttribute("name","header_param");
		   param_template.content.querySelector(".form-value").setAttribute("name","header_value");
		   param_template.content.querySelector(".form-param").value = "";
	       param_template.content.querySelector(".form-value").value = "";
	       $(".header-panel").append(param_template.content.cloneNode(true));
	  });
	  
	  //批量添加参数
	  $(".http-raw-add-param").on("click",function(){
	      $("#raws-param-text").val("");//清除元素
		  $('.small.modal').modal('show');//显示输入窗口
	  });
	  
	  //移除参数
	  $(document).on("click",'.http-remove-param',function(){
	      //当前元素的父元素
		  $(this).parent().parent().parent().remove();
	  });
	  
	  //确定添加
	  $(".add-raws-param-enter").on("click",function(){
	      var raws = $("#raws-param-text").val();
		  var raws = raws.split("&");
		  for(var i = 0; i < raws.length; i++){
		      var v = raws[i].split("=");
			  if(v.length<2){
			      break;
			  }
		      var param = v[0];
			  var value = v[1];
			  param_template.content.querySelector(".form-param").value = v[0];
			  param_template.content.querySelector(".form-value").value = v[1];
			  $(".param-panel").append(param_template.content.cloneNode(true));
		  }
		  $('.small.modal').modal('hide');  //隐藏弹出窗口
	  });
	  
	 //复制内容到剪切板
      $(".copy-result").zclip({
		    path:'./static/lib/semantic/assets/ZeroClipboard.swf',
			copy:function(){
				return $(".response-body-content").val();
			},
			afterCopy:function(){
				alert("成功复制到剪切板");
			}
	  });

	  //发送http请求，第一步组装参数
	  $(".send-http").on("click",function(){
		var request_param_url = $("#request_url").val();  //待curl请求的url地址
		if(request_param_url==""){
		    alert("请输入url参数");return;
		}
	      //获取参数
		 $(".my-loader").addClass("active");
		 var request_param = {param:[],header_param:[]};
		 var paramEle =  $(".form-param");
		 $.each(paramEle,function(index,ele){
		     //获取子元素旁边的
			 var valueEle = $(ele).parents(".column-param").next().find(".form-value");//获取相同列的value
			 //组装参数
			 var row = {};
			 row['key'] = $(ele).val();
			 row['value'] = valueEle.val();
			 if($(ele).attr("name")=="param"){
				request_param.param.push(row);
			 }else{
			    request_param.header_param.push(row);
			 }
		 });
		
		request_param = JSON.stringify(request_param);  //param和头部的参数
		
		var request_param_type = $("#request_type").val();
		//发送ajax请求
		 $.ajax({
			url:"./sendHttp",
			type:"post",
			dataType:"json",
			data:{param:request_param,type:request_param_type,url:request_param_url},
			success:function(data){
				$(".my-loader").removeClass("active");
				if(data.success=="true"){
					//输出结果
					//格式化header数据
					var row = "";
					var obj = JSON.parse(data.header); 
					for(var v in obj){
						row += v +"："+obj[v][0]+"\n";
					}
					$(".response-body-content").val(data.body);
					$(".response-header-content").val(row);
					$(".response-header-content").css("height",$(".response-header-content")[0].scrollHeight)
				    $(".response-body-content").css("height",$(".response-body-content")[0].scrollHeight)
				}
			} 
		})
	  });
	  
    });
  </script>

  <style type="text/css">
  body {
    background-color: #FFFFFF;
  }
  .main.container {
    margin-top: 2em;
  }
  .logo{
      height:50px;
  }
  .main.menu {
    margin-top: 4em;
    border-radius: 0;
    border: none;
    box-shadow: none;
    transition:
      box-shadow 0.5s ease,
      padding 0.5s ease
    ;
  }
  .main.menu .item img.logo {
    margin-right: 1.5em;
  }
  .main.menu.fixed {
    background-color: #FFFFFF;
    border: 1px solid #DDD;
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2);
  }
  .content{
      width:90%;
	  max-width:900px;
	  margin:0 auto;
	  margin-top:-50px;
  }
  
  </style>

</head>
<body>
  
  <!--MENU-->
  <div class="ui borderless main menu">
    <div class="ui text container" >
	  <img class="logo" src="./static/logo.png">
      <div href="./index" class="item active">
        Http请求测试
      </div>
      <a href="./jsonformat" class="item">Josn在线解析</a>
      <!--
      <a href="#" class="ui right floated dropdown item">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <div class="item">Link Item</div>
          <div class="item">Link Item</div>
          <div class="divider"></div>
          <div class="header">Header Item</div>
          <div class="item">
            <i class="dropdown icon"></i>
            Sub Menu
            <div class="menu">
              <div class="item">Link Item</div>
              <div class="item">Link Item</div>
            </div>
          </div>
          <div class="item">Link Item</div>
        </div>
      </a>-->
    </div>
  </div>
  

  <!--CONTENT-->
  <div class="content">
	 <div class="ui form">
	  <h4 class="ui dividing header">Http 接口测试工具</h4>
	  <div class="fields">
		  <div class="two wide field">
			  <select class="ui fluid search dropdown" id="request_type" name="card[expire-month]">
				<option value="1">GET</option>
				<option value="2">POST</option>
			  </select>
		 </div>
		 <div class="seven wide field">
			<input type="text" name="request_url" id="request_url" placeholder="http://">
		 </div>
		 <div class="field">
		     <button class="positive ui button send-http">发送请求</button>
		 </div>
		 <div class="field">
		     <button class="negative ui button copy-result">复制结果</button>
		 </div>
	  </div>
	  
	  <!--参数template-->
	  <template id="http-param-template">
        <div class="ui grid ">	  
		  <div class="six wide column column-param">
		       <div class="field">
			     <input type="text" name="param" class="form-param" placeholder="参数">
		       </div>
		  </div>
		  <div class="six wide column column-value">
		       <div class="field">
			     <input type="text" name="value" class="form-value" placeholder="Value">
		       </div>
		  </div>
		  <div class="four wide column">
		        <div class="field">
		         <button class="negative ui button http-remove-param">移除参数</button>
		       </div>
		  </div>
		</div>
      </template>
	  
	  <!--参数区域-->
	  <h4 class="ui dividing header">Body参数名称</h4>
	  <div class="field param-panel">
	
	  </div>
      <div class="fields" style="margin-top:10px">
	      <div class="field">
	          <button class="positive ui button http-add-param">添加参数</button>
		  </div>
		  <div class="field">
		      <button class="negative ui button http-raw-add-param">Raw批量添加</button>
		  </div>
	  </div>
	  
	  <!--头部区域-->
	  <h4 class="ui dividing header">Header名称</h4>
	  <div class="field header-panel">
		  
	  </div>
	   <div class="fields" style="margin-top:10px">
	      <div class="field">
	          <button class="positive ui button http-add-header">添加Header</button>
		  </div>
	   </div>
	   
	   <!--Reponse-->
	   <div class="ui grid">
		   <div class="six wide column">
			   <h4 class="ui dividing header">Response Header</h4>
			   <div class="field">
				 <textarea class="response-header-content" style="verflow-y: hidden;" onpropertychange="this.style.height = this.scrollHeight + 'px';" readonly="readonly" >
				</textarea>
			   </div>
		   </div>
		   <div class="ten wide column">
		        <h4 class="ui dividing header">Response Body</h4>
				<div class="field">
				 <textarea class="response-body-content" style="verflow-y: hidden;" onpropertychange="this.style.height = this.scrollHeight + 'px';" ></textarea>
			   </div>
		   </div>
	   </div>
	   
	   
	 </div>
     <h4 class="ui dividing header">Requests Header | Http Header</h4>
	        <table class="ui celled striped table">
	        	<thead>
	        		<tr>
			            <th>Header</th>
			            <th width="35%">解释</th>
			            <th width="40%">示例</th>
			        </tr>
	        	</thead>
			    <tbody>
			        <tr>
			            <td>Accept</td>
			            <td>指定客户端能够接收的内容类型</td>
			            <td>Accept: text/plain, text/html</td>
			        </tr>
			        <tr>
			            <td>Accept-Charset</td>
			            <td>浏览器可以接受的字符编码集。</td>
			            <td>Accept-Charset: iso-8859-5</td>
			        </tr>
			        <tr>
			            <td>Accept-Encoding</td>
			            <td>指定浏览器可以支持的web服务器返回内容压缩编码类型。</td>
			            <td>Accept-Encoding: compress, gzip</td>
			        </tr>
			        <tr>
			            <td>Accept-Language</td>
			            <td>浏览器可接受的语言</td>
			            <td>Accept-Language: en,zh</td>
			        </tr>
			        <tr>
			            <td>Accept-Ranges</td>
			            <td>可以请求网页实体的一个或者多个子范围字段</td>
			            <td>Accept-Ranges: bytes</td>
			        </tr>
			        <tr>
			            <td>Authorization</td>
			            <td>HTTP授权的授权证书</td>
			            <td>Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==</td>
			        </tr>
			        <tr>
			            <td>Cache-Control</td>
			            <td>指定请求和响应遵循的缓存机制</td>
			            <td>Cache-Control: no-cache</td>
			        </tr>
			        <tr>
			            <td>Connection</td>
			            <td>表示是否需要持久连接。（HTTP 1.1默认进行持久连接）</td>
			            <td>Connection: close</td>
			        </tr>
			        <tr>
			            <td>Cookie</td>
			            <td>HTTP请求发送时，会把保存在该请求域名下的所有cookie值一起发送给web服务器。</td>
			            <td>Cookie: $Version=1; Skin=new;</td>
			        </tr>
			        <tr>
			            <td>Content-Length</td>
			            <td>请求的内容长度</td>
			            <td>Content-Length: 348</td>
			        </tr>
			        <tr>
			            <td>Content-Type</td>
			            <td>请求的与实体对应的MIME信息</td>
			            <td>Content-Type: application/x-www-form-urlencoded</td>
			        </tr>
			        <tr>
			            <td>Date</td>
			            <td>请求发送的日期和时间</td>
			            <td>Date: Tue, 15 Nov&nbsp;2010 08:12:31 GMT</td>
			        </tr>
			        <tr>
			            <td>Expect</td>
			            <td>请求的特定的服务器行为</td>
			            <td>Expect: 100-continue</td>
			        </tr>
			        <tr>
			            <td>From</td>
			            <td>发出请求的用户的Email</td>
			            <td>From: user@email.com</td>
			        </tr>
			        <tr>
			            <td>Host</td>
			            <td>指定请求的服务器的域名和端口号</td>
			            <td>Host: www.zcmhi.com</td>
			        </tr>
			        <tr>
			            <td>If-Match</td>
			            <td>只有请求内容与实体相匹配才有效</td>
			            <td>If-Match: “737060cd8c284d8af7ad3082f209582d”</td>
			        </tr>
			        <tr>
			            <td>If-Modified-Since</td>
			            <td>如果请求的部分在指定时间之后被修改则请求成功，未被修改则返回304代码</td>
			            <td>If-Modified-Since: Sat, 29 Oct 2010 19:43:31 GMT</td>
			        </tr>
			        <tr>
			            <td>If-None-Match</td>
			            <td>如果内容未改变返回304代码，参数为服务器先前发送的Etag，与服务器回应的Etag比较判断是否改变</td>
			            <td>If-None-Match: “737060cd8c284d8af7ad3082f209582d”</td>
			        </tr>
			        <tr>
			            <td>If-Range</td>
			            <td>如果实体未改变，服务器发送客户端丢失的部分，否则发送整个实体。参数也为Etag</td>
			            <td>If-Range: “737060cd8c284d8af7ad3082f209582d”</td>
			        </tr>
			        <tr>
			            <td>If-Unmodified-Since</td>
			            <td>只在实体在指定时间之后未被修改才请求成功</td>
			            <td>If-Unmodified-Since: Sat, 29 Oct 2010 19:43:31 GMT</td>
			        </tr>
			        <tr>
			            <td>Max-Forwards</td>
			            <td>限制信息通过代理和网关传送的时间</td>
			            <td>Max-Forwards: 10</td>
			        </tr>
			        <tr>
			            <td>Pragma</td>
			            <td>用来包含实现特定的指令</td>
			            <td>Pragma: no-cache</td>
			        </tr>
			        <tr>
			            <td>Proxy-Authorization</td>
			            <td>连接到代理的授权证书</td>
			            <td>Proxy-Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==</td>
			        </tr>
			        <tr>
			            <td>Range</td>
			            <td>只请求实体的一部分，指定范围</td>
			            <td>Range: bytes=500-999</td>
			        </tr>
			        <tr>
			            <td>Referer</td>
			            <td>先前网页的地址，当前请求网页紧随其后,即来路</td>
			            <td>Referer: http://www.zcmhi.com/archives/71.html</td>
			        </tr>
			        <tr>
			            <td>TE</td>
			            <td>客户端愿意接受的传输编码，并通知服务器接受接受尾加头信息</td>
			            <td>TE: trailers,deflate;q=0.5</td>
			        </tr>
			        <tr>
			            <td>Upgrade</td>
			            <td>向服务器指定某种传输协议以便服务器进行转换（如果支持）</td>
			            <td>Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11</td>
			        </tr>
			        <tr>
			            <td>User-Agent</td>
			            <td>User-Agent的内容包含发出请求的用户信息</td>
			            <td>User-Agent: Mozilla/5.0 (Linux; X11)</td>
			        </tr>
			        <tr>
			            <td>Via</td>
			            <td>通知中间网关或代理服务器地址，通信协议</td>
			            <td>Via: 1.0 fred, 1.1 nowhere.com (Apache/1.1)</td>
			        </tr>
			        <tr>
			            <td>Warning</td>
			            <td>关于消息实体的警告信息</td>
			            <td>Warn: 199 Miscellaneous warning</td>
			        </tr>
			    </tbody>
			</table>
	    
		<h4 class="ui dividing header">Responses 部分 | Http Header</h4>
	        <table class="ui celled striped table">
	        	<thead>
	        		<tr>
			            <th>Header</th>
			            <th width="35%">解释</th>
			            <th width="40%">示例</th>
			        </tr>
	        	</thead>
			    <tbody>
			        <tr>
			            <td>Accept-Ranges</td>
			            <td>表明服务器是否支持指定范围请求及哪种类型的分段请求</td>
			            <td>Accept-Ranges: bytes</td>
			        </tr>
			        <tr>
			            <td>Age</td>
			            <td>从原始服务器到代理缓存形成的估算时间（以秒计，非负）</td>
			            <td>Age: 12</td>
			        </tr>
			        <tr>
			            <td>Allow</td>
			            <td>对某网络资源的有效的请求行为，不允许则返回405</td>
			            <td>Allow: GET, HEAD</td>
			        </tr>
			        <tr>
			            <td>Cache-Control</td>
			            <td>告诉所有的缓存机制是否可以缓存及哪种类型</td>
			            <td>Cache-Control: no-cache</td>
			        </tr>
			        <tr>
			            <td>Content-Encoding</td>
			            <td>web服务器支持的返回内容压缩编码类型。</td>
			            <td>Content-Encoding: gzip</td>
			        </tr>
			        <tr>
			            <td>Content-Language</td>
			            <td>响应体的语言</td>
			            <td>Content-Language: en,zh</td>
			        </tr>
			        <tr>
			            <td>Content-Length</td>
			            <td>响应体的长度</td>
			            <td>Content-Length: 348</td>
			        </tr>
			        <tr>
			            <td>Content-Location</td>
			            <td>请求资源可替代的备用的另一地址</td>
			            <td>Content-Location: /index.htm</td>
			        </tr>
			        <tr>
			            <td>Content-MD5</td>
			            <td>返回资源的MD5校验值</td>
			            <td>Content-MD5: Q2hlY2sgSW50ZWdyaXR5IQ==</td>
			        </tr>
			        <tr>
			            <td>Content-Range</td>
			            <td>在整个返回体中本部分的字节位置</td>
			            <td>Content-Range: bytes 21010-47021/47022</td>
			        </tr>
			        <tr>
			            <td>Content-Type</td>
			            <td>返回内容的MIME类型</td>
			            <td>Content-Type: text/html; charset=utf-8</td>
			        </tr>
			        <tr>
			            <td>Date</td>
			            <td>原始服务器消息发出的时间</td>
			            <td>Date: Tue, 15 Nov 2010 08:12:31 GMT</td>
			        </tr>
			        <tr>
			            <td>ETag</td>
			            <td>请求变量的实体标签的当前值</td>
			            <td>ETag: “737060cd8c284d8af7ad3082f209582d”</td>
			        </tr>
			        <tr>
			            <td>Expires</td>
			            <td>响应过期的日期和时间</td>
			            <td>Expires: Thu, 01 Dec 2010 16:00:00 GMT</td>
			        </tr>
			        <tr>
			            <td>Last-Modified</td>
			            <td>请求资源的最后修改时间</td>
			            <td>Last-Modified: Tue, 15 Nov 2010 12:45:26 GMT</td>
			        </tr>
			        <tr>
			            <td>Location</td>
			            <td>用来重定向接收方到非请求URL的位置来完成请求或标识新的资源</td>
			            <td>Location: http://www.zcmhi.com/archives/94.html</td>
			        </tr>
			        <tr>
			            <td>Pragma</td>
			            <td>包括实现特定的指令，它可应用到响应链上的任何接收方</td>
			            <td>Pragma: no-cache</td>
			        </tr>
			        <tr>
			            <td>Proxy-Authenticate</td>
			            <td>它指出认证方案和可应用到代理的该URL上的参数</td>
			            <td>Proxy-Authenticate: Basic</td>
			        </tr>
			        <tr>
			            <td>refresh</td>
			            <td>应用于重定向或一个新的资源被创造，在5秒之后重定向（由网景提出，被大部分浏览器支持）</td>
			            <td>
			                Refresh: 5; url=http://www.atool.org/httptest.php
			            </td>
			        </tr>
			        <tr>
			            <td>Retry-After</td>
			            <td>如果实体暂时不可取，通知客户端在指定时间之后再次尝试</td>
			            <td>Retry-After: 120</td>
			        </tr>
			        <tr>
			            <td>Server</td>
			            <td>web服务器软件名称</td>
			            <td>Server: Apache/1.3.27 (Unix) (Red-Hat/Linux)</td>
			        </tr>
			        <tr>
			            <td>Set-Cookie</td>
			            <td>设置Http Cookie</td>
			            <td>Set-Cookie: UserID=JohnDoe; Max-Age=3600; Version=1</td>
			        </tr>
			        <tr>
			            <td>Trailer</td>
			            <td>指出头域在分块传输编码的尾部存在</td>
			            <td>Trailer: Max-Forwards</td>
			        </tr>
			        <tr>
			            <td>Transfer-Encoding</td>
			            <td>文件传输编码</td>
			            <td><span style="font-family: monospace;"><span style="font-family: Georgia,'Times New Roman','Bitstream Charter',Times,serif;">Transfer-Encoding:chunked</span></span>
			            </td>
			        </tr>
			        <tr>
			            <td>Vary</td>
			            <td>告诉下游代理是使用缓存响应还是从原始服务器请求</td>
			            <td>Vary: *</td>
			        </tr>
			        <tr>
			            <td>Via</td>
			            <td>告知代理客户端响应是通过哪里发送的</td>
			            <td>Via: 1.0 fred, 1.1 nowhere.com (Apache/1.1)</td>
			        </tr>
			        <tr>
			            <td>Warning</td>
			            <td>警告实体可能存在的问题</td>
			            <td>Warning: 199 Miscellaneous warning</td>
			        </tr>
			        <tr>
			            <td>WWW-Authenticate</td>
			            <td>表明客户端请求实体应该使用的授权方案</td>
			            <td>WWW-Authenticate: Basic</td>
			        </tr>
			    </tbody>
			</table>
  </div>
  
   <!--弹出model-->
  <div class="ui small modal">
      <div class="header">批量添加参数</div>
	  <div class="content">
	      <p>输入Raw参数，例如：id=123&sale=yes&deleted=0</p>
		  <div class="ui form">
			  <div class="field">
				  <input type="text" id="raws-param-text" placeholder="Type..." />
			  </div>
		  </div>
	  </div>
	  <div class="actions">
		  <div class="ui green button add-raws-param-enter">确定添加</div>
      </div>
  </div>
  
  <!--加载器-->
  <div class="ui inverted dimmer my-loader">
    <div class="ui text loader">Loading</div>
  </div>
</body>

</html>